<template>
    <div>
        <el-dialog :title="isAdd ? '添加商品规格' : '编辑商品规格'" :visible.sync="isshow" :before-close="cancel" center>
            <el-form ref="specs_info" :model="specs_info" :rules="rules">
                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="specsname">
                    <el-input autocomplete="off" v-model="specs_info.specsname"></el-input>
                </el-form-item>
                <el-form-item v-for="(item, index) in attrArr" label="规格属性" :label-width="formLabelWidth">
                    <el-input class="inpInfo" autocomplete="off" v-model="item.value"></el-input>
                    <el-button v-if="index == 0" type="primary" size="small" @click="addAttr">新增规格属性</el-button>
                    <el-button v-else type="danger" size="small" @click="del(index)">删除</el-button>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="specs_info.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { specsadd, specsinfo, specsedit } from '../../request/api'
import { mapActions } from "vuex";
export default {
    props: ['isshow', 'isAdd'],
    data() {
        return {
            specs_info: {
                specsname: '',//商品规格名称
                attrs: '',//商品规格属性值
                status: 1,//状态   1正常2禁用   number类型
            },
            formLabelWidth: "120px",
            rules: {
                specsname: [
                    { required: true, message: "请输入商品规格名称", trigger: "blur" },
                    {
                        min: 2,
                        max: 6,
                        message: "长度在 2 到 6 个字符",
                        trigger: "blur",
                    },
                ]
            },
            //设置一个空数组，用于循环动态input
            attrArr: [
                {
                    value: "",
                },
            ],
        };
    },

    methods: {
        ...mapActions({
            getSpecs: "specs/getSpecsListAction",
            getCount: "specs/getCountAction",
        }),
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        lookup(id) {
            specsinfo({ id }).then((res) => {
                if (res.data.code == 200) {
                    this.specs_info = res.data.list[0],
                        this.specs_info.id = id,
                        /* 
                       后端返回的数据格式：
                       attrs: ["红", "黄", "蓝"]
                       但是我们前端展示的时候 需要的数据格式
                       this.attrArr :[
                       {
                       value: "",
                       },
                   ]
                     */
                        this.specs_info.attrs.map((item, index) => {
                            console.log(item, '每一项');
                            if (index == 0) {
                                this.attrArr[0].value = item
                            } else {
                                this.attrArr.push({
                                    value: item,
                                });
                            }
                        })
                }
            })
        },
        reset() {
            this.specs_info = {
                specsname: '',//商品规格名称
                attrs: '',//商品规格属性值
                status: 1,//状态   1正常2禁用   number类型
            };
            //清空表单验证
            this.$refs.specs_info.resetFields();
            // 清空动态表单项
            this.attrArr = [
                {
                    value: "",
                },
            ]
        },
        // 动态添加规格属性
        addAttr() {
            if (this.attrArr.length > 6) {
                this.$message.warning("最多添加6条");
            } else {
                this.attrArr.push({
                    value: "",
                });
            }
        },
        // 确定事件
        confirm() {
            this.$refs.specs_info.validate((valid) => {
                if (valid) {
                    /* 
                        目前规格属性的格式是：
                        this.attrArr = [{value:'1'},{value:'2'},{value:'3'}...]
                        后端想要的数据格式是 '1,2,3'
                        思路：
                        1、先生成一个数组，map
                        2、join 拼接成','分割的字符串
                    */
                    this.specs_info.attrs = this.attrArr
                        .map((item) => item.value)
                        .join(',')
                    if (this.isAdd) {
                        specsadd(this.specs_info).then((res) => {
                            if (res.data.code) {
                                this.$message.success(res.data.msg);
                                this.cancel();
                                //重新调用接口列表以及总条数
                                this.getSpecs();
                                this.getCount();
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        specsedit(this.specs_info).then((res) => {
                            if (res.data.code) {
                                this.$message.success(res.data.msg);
                                this.cancel();
                                //重新调用接口列表以及总条数
                                this.getSpecs();
                                this.getCount();
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    }
                }
            })
        },
        // 删除商品规格
        del(i) {
            this.attrArr.splice(i, 1)
        }
    }
};
</script>

<style scoped>
.inpInfo {
    width: 65%;
    margin-right: 15px;
}
</style>
